<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="button-groups">
            <button class="add">新增</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    // 如何创建节点
    // document.createElement(tagName)  根据传入的标签名创建一个元素节点 => 返回被创建的元素节点
    // document.createTextNode(string)  根据传入的文本创建一个文本节点    => 返回被创建的文本节点
    // document.createComment(string)   根据传入的文本创建一个注释节点    => 返回被创建的注释节点


    // 注意: 
    // 被创建的节点默认存储在内存当中,只有放到页面中才会显示


    // 如何将创建的节点放到页面中?  
    // 1. 追加和预追加(父元素统筹 -> 父元素所有内容的最前面 / 最后面)    append追加   prepend预追加  => 
    // parentEle.appendChild(node)    向匹配的父元素中 追加 一个 节点(新的/页面中已存在的) => 父元素所有内容的最后方 
    // parentEle.append(node|string)    向匹配的父元素中 追加 一个 节点/文本(新的/页面中已存在的) => 父元素所有内容的最后方 
    // parentEle.prepend(node|string)    向匹配的父元素中 追加 一个 节点/文本(新的/页面中已存在的) => 父元素所有内容的最前方 

    // 2. 插入同级 (父元素统筹)
    // parentEle.insertBefore(newNode,oldNode)  在父元素中,将一个元素(新的/页面中已存在的) 插入到 另一个元素(页面中已存在的)的前面



    var add = document.querySelector(".add");
    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

    // 需求: 点击新增按钮 创建一个li 放到.list的最后面
    add.onclick = function () {
        // 如何创建一个li
        var li = document.createElement("li"); // 创建一个元素节点(li)

        // 被创建的li -> 正常的元素节点 -> 修改内容 添加属性 修改样式 绑定事件
        // li.innerText = "我是被新增的li";

        // 新增文本节点
        // var text = document.createTextNode("我是被新增的li");
        // console.log(text, typeof text);
        // li.appendChild(text);

        // var comment = document.createComment("这是注释的内容");
        // console.log(comment);
        // li.appendChild(comment)

        // li.setAttribute("class", "newLi");
        // 创建属性节点
        var classAttr = document.createAttribute("class");
        classAttr.nodeValue = "newLi";
        console.log(classAttr);
        li.setAttributeNode(classAttr);  //给元素节点 设置 属性节点 
        // li.removeAttributeNode(classAttr);  //给元素节点 设置 属性节点 


        var list = ["red", "orange", "yellow", "green", "pink", "#6ff"];
        var index = Math.floor(Math.random() * list.length);
        li.style.backgroundColor = list[index];

        li.onclick = function () {
            alert(11111);
        }


        ul.appendChild(li);   // 追加父元素

    }



</script>

</html>